<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
  <title>移动端HTML文档（富文本）编辑器 - Zx-Editor</title>
  <meta name="keyword" content="Zx-Editor,html-editor,editor">
  <meta name="description" content="移动端HTML文档（富文本）编辑器，支持图文混排、引用、大标题、无序列表，字体颜色、加粗、斜体。">
  <link rel="stylesheet" href="./css/index.css">
  <style type="text/css">
    .header-wrapper{
      background-color: #fff;
    border-bottom: 1px solid #e5e5e5;
    height: 50px;
    position: relative;
    width: 100%
    }
    .header-wrapper .left-btn {position: absolute;left: 0;top: 0;z-index: 2;}
    .header-wrapper .left-btn img{width: 25px;height: auto;}
    .header-wrapper .center-btn {text-align: center;position: relative;}
    .header-wrapper .right-btn {position: absolute;right: 0;top: 0;text-align: right;}
    .header_title{font-weight: normal;color: #5f5f5f;line-height: 50px;font-size: 0.6rem;}
  	.__emoji{ display:none !important;  }
  	/*.__link{ display: none !important; }*/
  	/*.cover-wrapper{ display: none !important; }*/
    .cover-wrapper{margin-top: 0;}
    .cover-wrapper .cover{min-height: 200px;}
  	.zxeditor-debug-switch{ display: none !important; }
  	.zxeditor-container .zxeditor-content-wrapper{ min-height:200px !important; max-height:400px !important; overflow-y: scroll;  }
  	.border-bm{ border-bottom:1px dashed #eeeeee; }
  	/*.zxeditor-container .zxeditor-toolbar-wrapper{ position:absolute !important; border-bottom:1px dashed #eeeeee; }*/
  	.zxeditor-container .zxeditor-toolbar-wrapper dl:after{ border:0px !important; border:1px dashed #eeeeee !important; }
  	.title-wrapper .placeholder{ font-size:18px; }
  	.title-wrapper .input-hook{ font-size:18px;  }
  </style>
</head>
<body>
<div class="container"> 
  <section class="header-wrapper">
    <div class="left-btn">
      <div style="padding:15px 0px 0px 10px">
        <a onclick="javascript:void(0);"><img src="./img/back@2x.png"></a> 
      </div>
    </div>
    <div class="center-btn">
      <span class="header_title">文章</span>
    </div>
    <div class="right-btn">
      <div style="padding:15px 15px 0px 0px">
        <a href="javascript:handleSubmitClick();" style="font-size:18px;color:#FFB74F;text-decoration: none;">发布</a>
      </div>
    </div>
  </section>
  <section class="cover-wrapper">
    <div class="cover"><img src=""></div>
    <input type="file" accept="image/*" style="display: none">
  </section>
  <!--标题-->
  <section class="title-wrapper border-bm">
    <div class="item placeholder"><span>请输入标题...</span></div>
    <div class="item input-hook" contenteditable="true" style="display: none;"></div>
  </section>
  <!--导语、摘要-->
  <section class="summary-wrapper border-bm" style="display: none !important;">
    <div class="item placeholder">输入导语，140字内（非必填）</div>
    <div class="item input-hook" contenteditable="true" style="display: none;"></div>
  </section>
  <article>
    <div class="zx-eidtor-container" id="editorContainer"></div>
  </article>
</div>

<!--预览-->
<div class="article-preview-wrapper">
  <header class="border-bm">
    <div class="left-wrapper">
      <a href="#" class="back-text" onclick="handleBackPreviewClick()">继续编辑</a>
    </div>
    <div class="right-wrapper">
      <a href="#" class="submit active" onclick="handleSubmitClick()">完成</a>
    </div>
  </header>
  <div class="preview-wrapper">
    <div class="preview-cover"><img src=""></div>
    <div class="preview-title"></div>
    <div class="preview-summary"></div>
    <div class="preveiw-content"></div>
  </div>
</div>

<script src="./js/polyfill.min.js"></script>
<!--exif获取照片参数插件-->
<script src="./libs/exif.min.js"></script>
<!--debug-->
<script src="./libs/zx-debug.min.js"></script>
<!--编辑器-->
<script src="./js/zx-editor.js"></script>
<!--编辑器扩展库-->
<script src="./js/extend.js"></script>
<!--发布文章逻辑-->
<script src="./js/index.js"></script>
</body>
<script> 
	/*-----------监听编辑器动作-----------*/
	//监听点击添加图片按钮
	zxEditor.on('select-picture', function (callback) {
		zxEditor.addImage('http://91gsc.com/img_ftG2P2QKBDYOpRK.jpg');
		zxEditor.dialog.alert('成功向编辑器中加入图片：http://91gsc.com/img_ftG2P2QKBDYOpRK.jpg,这是一个模拟测试,实际项目中请先将图片上传至后端成功回调后再向编辑器中插入图片地址！', function () {});
	}); 
</script>
</html>
